Text - in the context of accessible Web design - is truly your flexible friend; it can be transformed into audio or braille, used to describe non-text elements, and be presented visually in an infinite number of sizes. In the world of accessible design goodies and baddies, text is a goodie, a real accessibility hero.

But - as with all heroes - text also has the potential to be a very bad; bad text is:

• unable to be changed to suit the preferences of the end user
• difficult to read due to font incompatibilites.
• so small it is unreadable
• inaccessible due to inadequate contrast between text and background or due to 'busy' backgrounds
• presented in inpenetrable blocks that make it difficult to read
• presented as an image - that can't be resized or read by people using screen readers.
• difficult to read because it is moving or blinking.

However, with a bit of careful thought, and the application of some basic guidelines, all of the above problems can easily be avoided. In part two and three of 'Understanding Web Typography', I intend to deal with the usability and 'text size' problems listed above, but for now the emphasis is on understanding how to choose accessible and usable fonts.

As a Web designer committed to accessible Web design there are - in general - two approaches. You can take the easy route, summed up in the following phrase:

It is better not to set a font size or type at all - but instead leave this decision to the user.

Or the more difficult route - which involves learning about the vagaries of online typography and taking an active role in designing the text on your Web pages. For many designers control of Web text is essential for reasons of branding, house style, subject appropriateness, or just plain old ego. Control of Web text can also realise usability gains; CSS provides limited control over margins, line width, line height, colour and font choice and size - all of which can help layout text in a way that makes it easier to read. And a Web page that is easier to read is a more accessible Web page.

If you are happy to follow the first route (i.e. do nothing), you can stop reading now. Assuming readability is not compromised by inaccessible colour schemes, you already know enough to create accessible text on your Web pages. Visitors to your Website will be presented with the default font and font size they have set in their Web browser preferences - and they will be able to change these properties to suit their own needs. (There is one problem with this particular solution and that is that the majority of people probably do not know that they can change the default font in their browser preferences, or, indeed, how to do it.)

If you decide that you need to, or want to, have some control over the size, colour, layout and typeface of the text on your Web pages, then you also need to 'buy into' the idea that you will never be able to completely control how a user will see your text. HTML was never designed to provide sophisticated typographic or layout capabilities. On the contrary its main job was to enforce the logical structure of documents; leaving the presentation of the page up to the individual capabilities of the computers and devices that would display the page.

Although you can, with the help of CSS or the deprecated FONT tag, provide your own set of 'suggestions' about how a Web page should look - and we will examine what those are later in this article - users can override practically all of your choices by setting their own browser preferences. And on an accessible Website, that is how it should be.

"you can't always get what you want, but if you try, sometimes you get what you need", Mick Jagger.

The typeface used on a Web page, or indeed any document, affects the way we feel about the content. Whereby one page looks formal and serious, another informal and friendly, yet another may be modern and cool. Clearly the typography of a page designed to support a childrens TV program (http://www.bbc.co.uk/cbbc/) should be different for one designed for a politics course in a university (http://www.ksg.harvard.edu/prg/). Similarly the text on the Financial Times Website (http://news.ft.com/home/uk/), if it is doing its job right, should be be different from that of the The Tate Modern (http://www.tate.org.uk/modern/default.htm).

So typography, whether on the Web or otherwise has a job to do; to support and re-enforce the message being presented by the content, or tell you something about the writer or publication that the the page is part of. It should give the reader clues about the nature of an article or content they are about to read. For example, the text from an old manuscript might usefully be presented in a cursive style font that reflects its ancient content.

Having said that, it turns out that it is not that easy to find many examples on the Web that illustrate the points I make above. It can never be guaranteed that the font-face specified by the designer of a Web page will be the same as that seen by the reader. Using fonts on the Web is problematic; there are many hidden dangers for the would-be Web typographer. However, before embarking on a discussion of potential problems, for those new to the world of typography, it would be useful to quickly summarise the following 'general knowledge' about fonts and design. If none of this is news to you, please skip to the following section.

Traditionally fonts have been categorised as either 'serif' or 'sans serif'. Serif fonts are characterised by the small decorative embellishements, called serifs, that are added to each character - Times is a good example:

Times

Sans serif (without serifs) fonts do not have these embellishments. An example of a sans serif font is

Helvetica

The commonly held belief is that sans serif fonts are more difficult to read than serif fonts. This is based on the idea that the serifs help to lead the eye through the text, and the notion that our brains are quicker to recognise their more distinctive shapes. For this reason most traditional documents use serif fonts when large chunks of text need to be presented, such as the main body of a story in a newspaper. The cleaner, bolder, less busy shapes of sans serif fonts are used most often for 'display' type such as headlines and advertising slogans. If you pick up most newspapers or magazines you will recognised the implementation of these basic 'rules'.

Sans serif fonts are arguably more 'modern' looking, more 'cool'. Although many consider them to be mechanical and lifeless; lacking the subtlety, character and warmth of serif fonts. When the first sans serif fonts were introduced some people had a strong negative reaction and labelled them 'grotesque' (see http://www.webreference.com/dlab/9802/sansserif.html).

Serif fonts look more 'traditional', characterful, friendlier and more familiar, and as mentioned earlier, easier to read in dense passages. (see history of sans serif fonts: http://www.webreference.com/dlab/9802/sansserif.html)

These are very general observations - though hardly adequate for any meaningful introduction to the subject - they provide a basis for understanding how different styles of fonts are commonly used when designing online or off-line documents. As Dmitry Kirsanov notes in his article 'Matching Fonts' :

.. your single concern should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses. You can't set Shakespeare plays in a sans serif font (even of the "humanist" variety), and fragile Modern serifs are not appropriate for a pushy advertisement message. " http://www.webreference.com/dlab/9802/

A note on the readability of serif fonts on the web

It should be noted that the general rule that serif fonts are easier to read cannot be relied upon when designing for the Web. The usability expert Jakob Neilson, notes that, particularly for small sizes, sans-serif fonts are more readable on low resolution screens.

Creating accessible usable type for the Web is not a straight-forward business. It is useful to be aware of the following issues:

• The same fonts are not available on all operating systems.
• Some typefaces are designed to look good on screen, some designed to look good on paper. Those designed to look good on paper (particularly serif fonts) tend to look 'messy' on screen.
• Text size is dependent on screen resolution and operating system being used.
• The type of browser used can affect how the text looks.
• Users have their computers set up with different defaults and can change the preferences on their browsers.

In the 'designers' ideal world he/she would pick the font-face they think is most appropriate for the job in hand, specify it in their Cascadding style sheet and publish their fabulous looking Web page for the world to gawp at. The user would see the fonts on the page exactly as specified and gain additional contextual information from their well chosen style. But the web is not an environment where such an 'ideal' is possible. For example, not all operating systems or even computers with the same operating systems, have the same set of fonts installed. As a designer, unless you pick a font that is likely to be available on the majority of users' systems, the browser will display the page using the default font, usually Times or Times New Roman. Times in particular, is not easy to read on a computer monitor, so you could end up, despite thoughtful consideration of what is best for your page, with text that is difficult for users' to read.

There are a limited number of fonts that you can depend on to be installed on most systems, designers are therefore forced to compromise; picking fonts that most closely meet the needs of their page design, while choosing from the relatively small list of fonts that are likely to be available. The following table shows the most common fonts on PC, Mac and Unix systems.

* Fonts come with Internet Explorer on both Windows PC and Mac.

On the excellent Rob Collins's web site you will find a more comprehensive list of Mac, PC and Internet Explorer fonts (http://www.angelfire.com/al4/rcollins/style/fonts.html).

Although the above list gives you an indication of the fonts that are likely to be available on different hardware platforms - not all are equally good choices for using on the web. Some fonts, for example, are optimised for screen display and others optimised for print.

Fonts designed for print, are drawn (i.e. onto paper by a printer) on-the-fly from geometric descriptions of their outlines, and are thus scalable to any size. The first generation of fonts designed in this way didn't look good on low resolution monitors, because there were not enough pixels available to display the subtlety and style inherent within the font descriptions. An Apple Mac has a default resolution of 72dpi (dots per inch), and a Windows PC a default resolution of 96dpi, whereas printed material is likely to have a resolution of 1200dpi and upwards.

In an effort to try to overcome the problem, pioneering web font designers such as Chuck Bigelow (who designed the early screen font Pellucida as a screen equivalent of Lucida), developed a number of 'bitmapped' screen fonts. Bitmapped fonts were designed in harmony with the square pixel grid of low resolution screens; in a bitmapped font, every character is represented by a particular arrangement of pixels on the screen and has been carefully tweaked by a designer for optimal readability and clearness.

Apple were quick to take advantage of bitmapped fonts to increase the readability of on-screen text. Looking back at our earlier list of included fonts for the Mac, you can tell which fonts are the bitmap screen fonts because they mostly have city names, e.g. Geneva (for Helvetica), New York (for Times) , Monaco (for Courier). On MS Window bitmapped fonts can be recognised by their distinctive red and white icons found in the Windows/Fonts folder. Bitmapped fonts in MS Windows tend to be used for file and folder icon and windows labels.

However one problem with bitmap fonts was that they where available in a limited number of sizes. If you chose a size that was not installed, 'you would get an attack of the on screen jaggies', i.e. the characters would look very roughtly drawn, and be difficult to read. This was because the computer would try to create the characters based on what it new about the shape of the font or based on the outline printer version installed on a connected printer. Unfortunatly, most of the time it did not make a good job of drawing the characters on the screen.

In the past, scalable fonts didn't look good on screen, but similarly, bitmapped fonts didn't look good when printed (a 72dpi bitmap font would prints out at 72dpi, even on a high resolution printer). Commonly - your nerdy typographically aware computer user - would write in a screen font, but convert to a printer font before printing.

It is beyond the scope of this article to give you the full 'then and now' story of how things have changed (a useful summary can be found here: http://www.dotprint.com/graphics/graphi26.htm), but it is safe to say that these days very few people designing for the Web - would know the difference between a screen font, a printer font, and a hole in the wall. Many of the fonts commonly used on the Web today actually look good on the screen, come in every size, and don't look too shabby when printed. That is because the trend is now towards designing outline fonts (i.e. geometrically defined fonts) that have been designed with the constraints of low resolution monitors in mind. Microsoft helped improve the readability of text on the web when they commissioned Matthew Carter to design fonts that worked well specifically on low resolution screens - and thus worked well on the web.

Matthew Carter, designer of the much used Verdana and Georgia, has this to say about screen fonts:

"In graphic design circles, people think of screen fonts as preview mode -- it's only when the toner hits the wood-pulp that we usually judge a typeface.

But that's an increasingly short-sighted view of life. Larger numbers of computer users spend their entire time in front of a screen and never (or seldom) print anything. So it became obvious to us that this was a reversal of priorities -- we should not approach this as doing printer fonts adapted for the screen, we should design them as screen fonts from the outset. The printer fonts are secondary in this case." Matthew Carter, Designer of Verdana and Georgia.
http://www.webreview.com/1997/11_07/webauthors/11_07_97_10.shtml

Adobe with the introduction of PostScript Type 1 fonts and Apple with their Truetype technology led the way in readable outline fonts for screen use. Microsoft has continued the trend with their ESQ (Enhanced Screen Quality) Truetype fonts. Microsoft have to be thanked for making freely available an excellent set of scalable, screen display fonts that have become the staple of Web typography:

• Verdana,
• Trebuchet MS,
• Georgia,
• Arial,
• Times New Roman,
• Courier New

Verdana, and Georgia were conceived from the outset as outline fonts optimised for screen use. Designed by Mathew Carter and 'hinted' by Tom Rickner they are both readable and clear even at relatively small sizes. Hinting means the manual modification of a font to make it look as good as possible on low resolution monitors, "A well-hinted font offers the quality onlyprovided in the past by hand-tuned bitmaps - but with all the speed and reduced memory requirements which characterize outline font formats." (Introduction to hinting: http://www.microsoft.com/typography/hinting/hinting.htm).

A selection of 'safe to use' fonts

Both Arial and Times New Roman, have been especially hinted to work well on computer screens and as a result they are now considered by many to be good choices for Web use. Times New Roman is certainly a good compromise serif font for Web documents that are likely to printed to be read off-line, although, the design of Georgia makes it a better looking more readable serif font for documents designed exclusively for screen display. Arial is probably the most popular - and some would say overused - font to be found on Web pages, and is very clear unless used in small sizes. Verdana is a good alternative to Arial, and is more readable at small sizes on low resolution screens.

It is important to remember that even these fonts will only be seen by the end user if they have them installed on their computers. The above mentioned Microsoft fonts are built-in to Windows 95 (and PC operating systems later than Windows 95), many of them are bundled with Microsoft Word (the worlds most popular word processor with over 90% market share on both PC and Mac ). They have also been bundled with Microsoft's Internet Explorer since version 3.

When considering what font to use the safest choices in terms of readability and availability on other platforms can be made from the fonts that come with Internet Explorer (and also installed with many Microsoft products). From those fonts the two cleanest for web use are likely to be Verdana (sans-serif) and Georgia (serif) as they have been designed specifically to look good on low resolution screens.

We can never be sure that users will have the fonts we specify available on their web connected clients; not everyone will be using Internet Explorer as their browser, or has installed Microsoft products on their computers. However there are ways to 'get around' the missing fonts problem; both CSS and the FONT tag allow us to supply a list of fonts that we would like to be used, and a generic font style if all else fails.

Body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

I have chosen Verdana as my prefered font for its readability even when users have set their default text size small. But this is a Microsoft font which comes with Windows 95 and above on PCs - It's likely to be available on the Mac, but it is not part of the basic fonts set that comes with it. Also it is a relatively new font and may not be built into earlier versions of the Windows operating systems.

Therefore, I have specified Arial for those PC users who do not have Verdana on their systems, and Helvetica (the Mac equivalent to Arial) for those who will be using Macs and don't have Arial or Verdana. Finally, I have specified that, if all else fails, use the browsers default sans serif font.

For those still using the FONT tag here is the equivalent instruction:

Some text

Although the font tag has been deprecated, meaning that browsers are no longer required to support it, it is still widely used by designers and still supported by all major browsers. I don't recommend the use of the font tag for two reasons, firstly it is no longer included in the current HTML standard, and secondly, the the use of FONT tag brings with it accessibility issues:

• Setting the FONT tag 'color' and 'face' attributes should be avoided because users may not be able to override your preferrences with their own. This could cause problems for, among others, people who are colour blind.
• If using the font tag to set the size of text, use FONT size= +1 or FONT size= -1 rather than font size = 1. Setting the font size to 1 may make the text too small for many users (although if they know how to change their preferences they can increase the size of the font).
• Many web designers use the Font tag to format text to make it look like a heading, rather than using the appropriate heading element. This makes pages less accessible for people using text only browsers or speech based browsers; because valuable structural information will be lost. (The same goes for using CSS to replace appropriate HTML elements)

See What's wrong with the FONT element? for more information about why the font tag should not be your number one way of setting font style attributes.

For those with 'text only' browsers, using the Font tag to set styles, font size, and colours will not have any impact, because the formatting instructions will just be ignored.

(Designers set the size of fonts on a page using the basefont and font element. These element are used to set the size of text on a page to one of 7 relative values, 1 being the smallest and 7 the largest, 3 is the equivalent to normal (default font size is set by the users browser). Each size is successsively 20% larger or smaller than the default. )

Why not use images instead?

To get round the limitations outlined above, it is common to see web pages with headings created as images rather than text (in fact I have came across entire pages where all of the text is contained in one big image). This approach gives the designer complete control of the look of the text, but unfortunately it also creates some problems of its own:

• Images can't be enlarged easily via the browser prefs; the size of images remains the same no matter how large the text becomes.
• Colour or contrast can't be changed to increase readability.
• If no 'alt' attribute is added to the text in the image will be lost when images are turned off in the client browser.
• Using images instead of real text decreases the amount of information related to page structure; a heading will be marked up as a heading with the tag, an image of a heading will not. Marking headings up appropriately is particularly useful for peole using screen readers; many screen readers can summarise a page by first extracting all of the headings.

• Maintenance issues: the presentation of text across an entire site can't be changed easily or quickly. Using style sheets to alter the presentation of text provides a more efficient method.
• Alt attributes will need to be added to each graphic.
• Using images increases the size of each page, download times will be longer.
• Text in images is not available to be indexed by search engines.

Some of the accessibility problems may be solved in the future with the introduction of scalable vector graphics (SVG), but for now using images of text rather than text itself is not a good option. (See http://www.w3.org/Graphics/SVG/Overview.htm8.)

Another possible way to overcome the 'client machine might not have my preferred font' problem is to 'embed' fonts into web pages. The technology to do this has been in existence since Netscape 4.01 and Internet Explorer 4. You can - in theory at least - now specify any font you wish; your chosen fonts are downloaded with the rest of the page.

But this technology has not become popular with web designers, in fact it seems to disappearing; very few sites making use of the greater control it offers web typographers. There are a nunber of reasons why this seemingly atractive idea has not been adopted:

• Internet Explorer and Netscape use different, incompatible technologies. Internet Explorer uses Embedded OpenType and Netscape uses TrueDoc.
• Embedded fonts don't work in older browsers (pre Internet Explorer 4 and pre Netscape 4.0).
• Embedding fonts into pages adds to download times.
• Security problems have been reported; it may be possible for users to steal fonts.
• There are still unresolved problems related to copyright and licensing of fonts.

Browser support for embedded fonts does not appear to be improving, with no support built into Netscape 6, it looks like Netscape has decided to abandon the technology. Detailed information about using embedded fonts can be found at http://builder.cnet.com/webbuilding/pages/Authoring/Typography/ss01.html

For now, sticking to fonts that you expect to find on your users machines, and are optomised for web use, is the best approach.

Simply put, there is no best font for accessibility, but that is not to say that for any particular user there will not be a 'most accessible font', there will be; but it will not be the same font for every user. Whereas, in the physical world of printed documents, this implies creating several different versions of every document; one to meet the presentation needs of each individual - on the web, with the help of style sheets, we can provide one page capable of being presented in many different ways.

We can't predict what will be the most accessible font for any particular user - so we have to fall back on the assumption that the user knows what is best; the most accessible font therefor will be the one they pick themselves. For example, this may be a custom font designed to assist someone with a particular eye condition. Your job as an accessible website designer is not to get in the way of the users' ability to set their own preferences - and in relation to typographical matters - that means the ability to choose a font that suits their own needs.

• Turn off your style sheets - so that the page adopts the default settings in the users browser (this is another good reason not to use the deprecated font tag; presentation attributes will still be present after the user turns off the style sheet).
• Substitute their own style sheet, assuming the browser has this facility.
• override all of the preferences set in your style sheet with their own, including font choice, text size and colours. Some of the most critical issues here are related to the unit used to set font sizes, i.e. absolute units versus relative units (explored in greate detail in the soon to come part 2 of Understanding Web Typography).

It turns out that it is not terribly difficult to pick fonts that are accessible and easy to read, once you have an knowledge of the possible pitfalls and how to get around them. Even if you restrict yourself to using style sheets and specifying Verdana, Arial, (sans-serif), Georgia, or Times New Roman (serif fonts) you won't go far wrong. However, it is useful to know why these are good choices and what you can do to realise extra accessibility, usability and readability for visitors to your site.The following list is summaries what we have learned so far,

• Ensure that you don't do anything that stops users from replacing your chosen font with their own 'more accessible' one (in other words avoid the use of the <--FONT--> tag).
• Use style sheets rather than the tag to set font preferences.
• Pick a font that you can be sure will be available on most operating systems, or provide alternatives in your font declaration including a generic font type.
• Choose a font appropriate to the message of your website.
• Use typefaces specifically designed for screen use.
• Attend to the usability and readability issues of the text on your pages including - as discussed - choosing a readable font. For the majority of your potential audience, many of whom will not be changing their browser preferences, paying attention to: line length; leading (line height); font size; primary font choice; and the balance between white space and text; will have an impact on how accessible your content is. The importance of concentrating on readabiltiy is heightened on the web by the twin factors of attention span and speed of reading and comprehenstion (10 - 20% slower on the web than on paper) It is these usability and readability issues that will be addressed in part 3 of Understanding Web Typography.

Links

• Articles about typography listed by Lijst.net.
• Typography By Tomas Caspers http://www.wpdfd.com/wpdtypo5.htm
  
• Fonts for the Macintosh have gone full circle writes ANDY BENEDEK; http://www.dotprint.com/graphics/graphi26.htm
  
• The World of Fonts by Dmitry Kirsanov http://www.webreference.com/dlab/9802/
  
• W3C access checkpoint 7: Text instead of images: http://www.w3.org/TR/WCAG10-CSS-TECHS/#text-not-images
  
• Webmonkey embedded font tutorial: http://hotwired.lycos.com/webmonkey/99/45/index1a.html?tw=design
  
• Tijs Teulings on embedded fonts: http://www.tijs.org/embed/
  
• Microsoft Typography: http://www.microsoft.com/typography/default.asp